<template>
  <div class="common-details">
    <customDetailsTopbar :title="$route.query.checkedTag.replace('管理','') + '详情'" flag @back="back" />
    <div class="d-scroll listInner px-1">
      <div class="py-1 px-1 bg-white">
        <customTitle :is-line="true" bg-color="#3795ff" title="基本信息" />
        <div v-for="(it, ind) in descList1" :key="'desc1' +ind">
          <custom-details-item :icon="it.icon" :label="it.label" :value="it.value">
            <template #valueSlot>
              <span>{{ it.value }}</span>
            </template>
          </custom-details-item>
        </div>
        <customTitle :is-line="true" bg-color="#3795ff" :title="title" />
        <div v-for="(it, ind) in descList2" :key="'desc2' +ind">
          <custom-details-item :icon="it.icon" :label="it.label" :value="it.value">
            <template #valueSlot>
              <el-link v-if="it.label === '附件'" type="primary" @click="openAttachPopUp(it.value)">查看</el-link>
              <span v-else>{{ it.value }}</span>
            </template>
          </custom-details-item>
        </div>
        <div class="common_list" style="padding: 0;">
          <div class="list_item">
            <customTitle :is-line="true" bg-color="#3795ff" title="消防检查记录" />
            <div v-for="(item,index) in tabList" :key="index">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    {{ item.fireCheckItem }}
                  </div>
                  <ul class="des-list">
                    <li v-for="(des,ind) in desc" :key="des.value" class="des">
                      <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="des.icon" />
                      <div class="label">{{ des.label }}：</div>
                      <div class="value">{{ item[des.value] }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <el-empty v-if="tabList.length === 0" />
          </div>
        </div>
      </div>
      <attachPopUp ref="attachPopUp" />
    </div>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { roomLetManagementDetail, roomLesseeManagementDetail } from '@/api/fireFighting'
export default {
  mixins: [commonList],
  data() {
    return {
      checkedTag: '房屋出租消防安全管理',
      roomLetId: '',
      descList1: [
        { label: '企业名称', fieldName: 'companyName', value: '/', icon: '&#xe790;' },
        { label: '房屋名称', fieldName: 'buildName', value: '/', icon: '&#xe62c;' },
        { label: '使用用途', fieldName: 'useCharacter', value: '/', icon: '&#xe634;' },
        { label: '是否人员密集场所', fieldName: 'isPeopleCrowded', value: '/', icon: '&#xe634;' },
        { label: '是否涉及动火作业', fieldName: 'isFireWork', value: '/', icon: '&#xe634;' },
        { label: '建筑物耐火等级', fieldName: 'fireLevel', value: '/', icon: '&#xe6f7;' },
        { label: '建筑物火灾危险性', fieldName: 'fireRisk', value: '/', icon: '&#xe682;' },
        { label: '建筑物结构', fieldName: 'buildStructure', value: '/', icon: '&#xe61c;' },
        { label: '座落位置', fieldName: 'letLocation', value: '/', icon: '&#xe87e;' },
        { label: '建筑面积(㎡)', fieldName: 'buildArea', value: '/', icon: '&#xe605;' },
        { label: '建筑高度(m)', fieldName: 'buildHigh', value: '/', icon: '&#xe65f;' },
        { label: '建筑物消防责任人', fieldName: 'buildRespon', value: '/', icon: '&#xe700;' },
        { label: '责任人联系方式', fieldName: 'buildResponPhone', value: '/', icon: '&#xe60a;' }
      ],
      title: '出租信息',
      descList2: [
        { label: '出租单位', fieldName: 'lesseeName', value: '/', icon: '&#xe790;' },
        { label: '租赁期限', fieldName: 'deadline', value: '/', icon: '&#xe62c;' },
        { label: '资质证明', fieldName: 'qualification', value: '/', icon: '&#xe634;' },
        { label: '现有消防设施', fieldName: 'existingFireFacilities', value: '/', icon: '&#xe634;' },
        { label: '是否签订消防安全协议', fieldName: 'signFireSafetyAgreement', value: '/', icon: '&#xe6f7;' },
        { label: '是否擅自改变用途', fieldName: 'changeUseCharacter', value: '/', icon: '&#xe682;' },
        { label: '联系人', fieldName: 'contact', value: '/', icon: '&#xe61c;' },
        { label: '联系电话', fieldName: 'phone', value: '/', icon: '&#xe87e;' },
        { label: '附件', fieldName: 'shareAttachVos', value: '/', icon: '&#xe87e;' }
      ],
      desc: [
        { label: '检查项目', value: 'fireCheckItem', icon: '&#xe60a;' },
        { label: '检查内容', value: 'fireCheckContent', icon: '&#xe62c;' },
        { label: '检查频次', value: 'fireCheckFrequency', icon: '&#xe61c;' },
        { label: '检查时间', value: 'fireCheckTime', icon: '&#xe685;' },
        { label: '检查人员', value: 'fireCheckPerson', icon: '&#xe700;' },
        { label: '检查结果', value: 'fireCheckResult', icon: '&#xe668;' },
        { label: '处理措施', value: 'handleMeasure', icon: '&#xe7d4;' }
      ],
      tabList: []
    }
  },
  mounted() {
    const { current, checkedTag, roomLetId } = this.$route.query
    this.current = current || ''
    this.checkedTag = checkedTag || '房屋出租消防安全管理'
    this.roomLetId = roomLetId || ''
    this.title = checkedTag === '房屋出租消防安全管理' ? '出租信息' : '承租信息'
    this.descList2[0].label = checkedTag === '房屋出租消防安全管理' ? '承租单位' : '出租单位'
    this.getDetail()
  },
  methods: {
    back() {
      this.$router.replace({
        path: '/staging/leaseOfHouses',
        query: this.$route.query
      })
    },
    // 获取列表
    async getDetail() {
      this.layout.showLoading()
      const api = {
        '房屋出租消防安全管理': roomLetManagementDetail,
        '房屋承租消防安全管理': roomLesseeManagementDetail
      }
      const { status, data } = await api[this.checkedTag]({
        roomLetId: this.roomLetId
      })
      if (status === 0 && data) {
        this.descList1.forEach((v) => {
          v.value = data.roomLetBasicVO[v.fieldName] !== '' ? data.roomLetBasicVO[v.fieldName].toString() : '/'
        })
        this.descList2.forEach((v) => {
          if (v.label === '租赁期限') {
            v.value = data.roomLetMessageVOS.signDate + '至' + data.roomLetMessageVOS.deadline
          } else if (v.label === '附件') {
            v.value = data.roomLetMessageVOS[v.fieldName]
          } else {
            v.value = data.roomLetMessageVOS[v.fieldName] !== '' ? data.roomLetMessageVOS[v.fieldName].toString() : '/'
          }
        })
        this.tabList = this.checkedTag === '房屋出租消防安全管理' ? data.fireInspectRecords : data.fireInspectRecords
        this.layout.hideLoading()
      }
    }
  }
}
</script>
